<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Kit graphique Squarr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Kit graphique Squarr" />
<meta name="Keywords" content="Kit graphique, Kit graphique Squarr" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/caroussel.css" />
<script type="text/javascript" src="js/caroussel.js"></script>
    <!--[if IE 6]><link href="css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->	
</head>
<body>
<div id="site">
	<div id="header">
		<h1><a href="#" title="Page d'accueil">You <span>[ Nice ]</span></a></h1>
	</div>
	<div id="menu">
		<ul>
			<li><a href="#">Ma playlist</a></li>
			<li><a href="#">Mes videos</a></li>
			<li><a href="#">Ma recherche</a></li>
			<li><a href="#">Mes preferees</a></li>
			<li><a href="#">Mon panier</a></li>
		</ul>
	</div>
	<div id="contenu">
		
		<div id="video">
			



			<table style="order: 1px solid #801600; background: white;">
				<tr>
					<td style="padding:0px; margin:0px;" >
						<div class='caroussel' style='height:375px;' >
							<div id='boite_englobante_1' style='height:375px;  width:120px; '>
								<div id='fleche_haut'> <img src='images/arrow-up.gif' id='arrow_up_image' onmouseout='StopperDefilement(this);' onmouseover='LancerDefilement(this,1); '> </div>
									<div id='boite_fenetre' style='height:305px;'>
										<div id='div_miniatures_1' style='position: relative;' >
										
											<div style='padding:0px; margin:0px; '><a href='#' onclick="AfficherImage('image1.jpg','1','375'); blur(); return false;"><img id='image1' src='image1.jpg'  style='filter:alpha(opacity=50); opacity:0.5; width: 100px; margin-left:9px;' onMouseOver='OpaciteMax(this);' onMouseOut='OpaciteMin(this);' ></a></div>	
											<div id='image1t' style='display:none; color: gray; font-size: 11; text-align:center; padding:2px; margin: 4px 0px 2px 9px; border:1px solid #90AA00; width:96px; _width:102px; '>Texte vid�o 1</div>	
								
											<div style='padding:0px; margin:0px; '><a href='#' onclick="AfficherImage('image2.jpg','1','375'); blur(); return false;"><img id='image2' src='image2.jpg'  style='filter:alpha(opacity=50); opacity:0.5; width: 100px; margin-left:9px;' onMouseOver='OpaciteMax(this);' onMouseOut='OpaciteMin(this);' ></a></div>	
											<div id='image2t' style='display:none; color: gray; font-size: 11; text-align:center; padding:2px; margin: 4px 0px 2px 9px; border:1px solid #90AA00; width:96px; _width:102px; '>Texte vid�o 2</div>	
											
											<div style='padding:0px; margin:0px; '><a href='#' onclick="AfficherImage('image3.jpg','1','375'); blur(); return false;"><img id='image3' src='image3.jpg'  style='filter:alpha(opacity=50); opacity:0.5; width: 100px; margin-left:9px;' onMouseOver='OpaciteMax(this);' onMouseOut='OpaciteMin(this);' ></a></div>
											<div id='image3t' style='display:none; color: gray; font-size: 11; text-align:center; padding:2px; margin: 4px 0px 2px 9px; border:1px solid #90AA00; width:96px; _width:102px; '>Texte vid�o 3</div>	
											
											<div style='padding:0px; margin:0px; '><a href='#' onclick="AfficherImage('image4.jpg','1','375'); blur(); return false;"><img id='image4' src='image4.jpg'  style='filter:alpha(opacity=50); opacity:0.5; width: 100px; margin-left:9px;' onMouseOver='OpaciteMax(this);' onMouseOut='OpaciteMin(this);' ></a></div>	
											<div id='image4t' style='display:none; color: gray; font-size: 11; text-align:center; padding:2px; margin: 4px 0px 2px 9px; border:1px solid #90AA00; width:96px; _width:102px; '>Texte vid�o 4</div>	
											
										</div>
									</div>
								<div id='fleche_bas'><img src='images/arrow-down.gif' id='arrow_down_image' onmouseout='StopperDefilement(this);' onmouseover='LancerDefilement(this,1);'></div>
							</div>
						</div>
					</td>

					<td>
						<table id='tabGrandeImage' style=' height:375px; _height: 381px; ' border='0' cellpadding='0' cellspacing='0'  width='500'>
							<tr>
								<td align='center'>
									<img height='375' id='GrandeImage_1' src='images/loading.gif'>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
					
			<!-- On appelle la premiere photo grace a javascript :) -->
			<SCRIPT LANGUAGE='javascript'>AfficherImage('image1.jpg','1','375');</SCRIPT>















		</div>

		<div id="playlist">
			<strong> Recherche :</strong>
			<input type="text" style="width:120px;"></input>
			<input type="button" value="Ok"></input>
				R&eacute;sultat de votre recherche 0 r&eacute;sultat(s)

		</div>

		<div id="bloc_haut">
			Bienvenue sur YouNice !
		</div>

		<div id="bloc_bas">
			Prochainement sur YouNice, vos vid&eacute;os pr&eacute;f&eacute;r&eacute;es !
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		</div>


	</div>
	<div id="footer">
		<ul>
			<li>&copy; 2009</li>
			<li>Webdesign : <a href="#">YouNice</a></li>
		</ul>
	</div>
</div>
</body>
</html>
